<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="az" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页-框架页</title>

    <%@include file="/view/common/common-href.jsp" %>

    <style>
        .panel-header {
            padding: 0px;
            position: relative;
        }

    </style>

</head>

<body>

<%--<div class="form-box" style="padding-top:15px;">--%>
    <div class="form-body">
        <form name="azeroth_form" id="azeroth_form" class="form form-horizontal"
              method="post" url="/sys/user/accredit?_m=exec">
            <input type="hidden" name="userUid" id="userUid" value="${userUid}" />
            <input type="hidden" name="roleUids" id="roleUids" />
        </form>
    </div>
<%--</div>--%>
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',split:false,border:false" style="width:46%;">
        <div class="easyui-panel" title="<i class='fa fa-user' aria-hidden='true'></i>&nbsp;未获得角色" style="width:100%;height:100%;color:#000000;">
            <table id="ttNoGain" class="easyui-datagrid" title="Basic DataGrid" style="height:100%; margin:0 0 0 0;"
                   data-options=" singleSelect:true, collapsible:true, fit:true, noheader:true, rownumbers:true, toolbar:'#tb',
                        loader:function(param, success, error){
                            $.ajax({
                                url: '/sys/role/searchAll?_m=load&gain=0&userUid=${userUid}',
                                dataType: 'json',
                                type: 'post',
                                success: function(data){
                                    if(data.pass!=null && !data.pass) {
                                        parent.$.messager.alert('提示', data.msg, 'error', function() { });
                                        return false;
                                    }
                                    success(data);
                                }
                            });
                        }
                ">
                <thead>
                <tr>
                    <th data-options="field:'roleName',width:150,align:'center'">角色名称</th>
                    <th data-options="field:'roleType',width:80,align:'center',
                    formatter: function(value, row, index) {
                        if (value==1){
                            return '系统管理';
                        } else if(value==2) {
                            return '用户管理';
                        } else if(value==3) {
                            return '来宾管理';
                        } else {
                            return '未知类型';
                        }
                    }
                ">角色类型</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
    <div data-options="region:'east',split:false,border:false" style="width:46%;">
        <div class="easyui-panel" title="<i class='fa fa-user' aria-hidden='true'></i>&nbsp;已授权角色" style="width:100%;height:100%;color:#000000;">
            <table id="ttGain" class="easyui-datagrid" title="Basic DataGrid" style="height:100%; margin:0 0 0 0;"
                   data-options=" singleSelect:true, collapsible:true, fit:true, noheader:true, rownumbers:true, toolbar:'#tb',
                        loader:function(param, success, error){
                            $.ajax({
                                url: '/sys/role/searchAll?_m=load&gain=1&userUid=${userUid}',
                                dataType: 'json',
                                type: 'post',
                                success: function(data){
                                    if(data.pass!=null && !data.pass) {
                                        parent.$.messager.alert('提示', data.msg, 'error', function() { });
                                        return false;
                                    }
                                    success(data);
                                }
                            });
                        }
                ">
                <thead>
                <tr>
                    <th data-options="field:'roleName',width:150,align:'center'">角色名称</th>
                    <th data-options="field:'roleType',width:80,align:'center',
                            formatter: function(value, row, index) {
                                if (value==1){
                                return '系统管理';
                            } else if(value==2) {
                                return '用户管理';
                            } else if(value==3) {
                                return '来宾管理';
                            } else {
                                return '未知类型';
                            }
                        }
                    ">使用状态</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
    <div data-options="region:'center',border:false">
        <div style="padding-top:140px;text-align: center;">
            <a class="btn btn-info" href="#" onclick="leftAdd()"><i class="fa fa-arrow-circle-right fa-1x"></i></a>
            <div style="height:10px;line-height: 10px;"></div>
            <a class="btn btn-info" href="#" onclick="rightAdd()"><i class="fa fa-arrow-circle-left fa-1x"></i></a>
        </div>
    </div>
</div>

</body>

</html>
<script type="text/javascript">
    var $objData = {};
    var $azerothForm = $('#azeroth_form');

    $objData.submitForm = function(dialog, gird) {
        var roleUids = [];
        var rows = $("#ttGain").datagrid("getRows");
        for(var i=0;i<rows.length;i++) {
            roleUids.push(rows[i].uid);
        }
        $("#roleUids").val(roleUids.join(','));

        $azerothForm.submit();

        // 返回成功后，销毁弹出框、刷新列表
        $objData.sucess = function() { gird.datagrid('reload'); dialog.dialog('destroy'); }

    };

    $azerothForm.form({
        url: $azerothForm.attr("url"),
        onSubmit:function(){
            if($(this).form('enableValidation').form('validate')){
                parent.$.messager.progress({ text : '正在处理，请稍后...' });
                return true;
            }else{
                return false;
            }
        },
        success:function(data) {
            parent.$.messager.alert("提示","保存成功！","info",function(){
                $objData.sucess();
            });
            parent.$.messager.progress('close');
        },
        error:function(){
            parent.$.messager.progress('close');
        }
    });

    function leftAdd() {
        var row = $("#ttNoGain").datagrid('getSelected');
        if(row) {
            $("#ttGain").datagrid('insertRow',{
                index: 0,
                row: row
            });

            var rowIndex = $("#ttNoGain").datagrid('getRowIndex', row);
            $("#ttNoGain").datagrid('deleteRow', rowIndex);
        }else{
            parent.$.messager.alert("提示", $AzerothData.methods.errorMsg("请选择一行数据！"), "error");
        }
    }

    function rightAdd() {
        var row = $("#ttGain").datagrid('getSelected');
        if(row) {
            $("#ttNoGain").datagrid('insertRow',{
                index: 0,
                row: row
            });

            var rowIndex = $("#ttGain").datagrid('getRowIndex', row);
            $("#ttGain").datagrid('deleteRow', rowIndex);
        }else{
            parent.$.messager.alert("提示", $AzerothData.methods.errorMsg("请选择一行数据！"), "error");
        }
    }

</script>